<template>
	<view>
		<navbar :config="config" backColor="#000"></navbar>
		<view class="page-content">

			<view class="text-box">
				<text class="text-title">地址</text>
				<view class="text-wrapper">
					<input inputmode="text" :value="address" class="uni-input" type="text" placeholder="请输入地址"
						@input="getHandleAddress" />
				</view>
				<view class="text-divider"></view>
				<text class="text-title">兑换数量</text>
				<view class="text-wrapper unit-input">
					<input :style="Style" inputmode="decimal" :value="BNB_num" class="uni-input" type="digit"
						placeholder="最少0" @input="getHandleFee" />
					<text class="text-unit u-474747">积分<text @click="getAllBNB" class="allView">全部兑换</text></text>

				</view>
				<view class="allViewjifen">可用 {{integralable||0.00}} 积分</view>
				<view class="text-wrapper unit-input">
					手机号：{{userPhone}}
				</view>
				<view class="text-wrapper unit-input" style="display: flex;flex-direction: row;justify-content: space-between;
				align-items: center;padding-right: 19rpx;">
					<input type="text" name="code" value="" placeholder-style="color:#AAAAAA; font-size:29rpx;"
						maxlength="6" @input="getVerfity_code" placeholder="请输入验证码" />
					<button class="verification-right active" :disabled="disabled" @click="sendVerfity_code">
						{{verificationCode}}
					</button>
				</view>
				<!-- 	<view class="des">
					*24小时兑换额度: 35353535/35353535 积分
					*请勿直接兑换至众筹或ICO地址，否则将无法收到众筹或ICO发放的代币。
				</view> -->
			</view>
			<!-- <u-line /> -->
			<view class="footer-wrapper">
				<view class="footer-content">
					<view class="footer-content-item">
						<view>到账数量</view>

						<view class="footer-content-num">
							<view>{{real_amount||0.00}}</view>
							<view>积分</view>
						</view>

					</view>

					<view class="zhuanhuanjifen">
						转换兑换券 {{handleFee||0.00}} 积分
					</view>
				</view>
				<view class="footer-button">
					<button class="mini-btn" type="primary" @click="submit2" size="default">确认</button>

				</view>
			</view>
		</view>
		<password-input @success="success" ref="passwordInput" :params="pointGiveAwayApi" :type="0" :useNums="value"
			:resultNum="`$元`"></password-input>
	</view>
</template>

<script>
	import {
		accountAddress,
		transfer_net,
		accountIdentityAsset,
		handleFee,
		withdrawal,
		getVerfityCode
	} from '@/api/bnb.js'
	import passwordInput from '@/components/password-input.vue'
	export default {
		components: {
			passwordInput
		},
		data() {
			return {
				address: '',
				BNB_num: '',
				verfity_code: '',
				mainNet: '',
				inputColor: '#000',
				handleFee: 0.00,
				real_amount: 0.00,
				integralable: 0, //可用积分
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '发送积分',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				disabled: false,
				verificationCode: "发送验证码",
				time: 60,
				userPhone: null,
				pointGiveAwayApi: {
					url: '',
					mode: 'post',
					data: {
						value: '',
						user_obj_id: ''
					}
				},
			};
		},
		mounted() {
			this.initPage()
			this.getUserInfo()
			// 简写方式使用
		},
		computed: {
			Style() {
				return `height:${this.statusBarHeight}px`;
			}
		},
		methods: {
			getUserInfo() {

				this.$http.get("/account/app-info").then(res => {
					if (res && res.code == 200) {
						console.log(res.data.mobile)
						this.userPhone = res.data.mobile
					}


				})
			},
			async initPage() {
				// const res1 = await this.$http.get(accountAddress)
				const res2 = await this.$http.get(accountIdentityAsset)
				const res3 = await this.$http.get(transfer_net)
				// this.address = res1.data.account_address
				this.integralable = res2.data.integral_able
				this.mainNet = res3.data[0].value

				// 	const qrcode = new QRCode("qrcode", this.address);
				// console.log(res1, res2)
			},
			getVerfity_code(val) {
				this.verfity_code = val.detail.value
			},
			sendVerfity_code() {
				this.$http.get(getVerfityCode).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						this.disabled = true;
						this.verificationCode = this.time + "s";
						this.clear = setInterval(this.countDown, 1000);
					}
				})
			},
			async success(psd) {
				const params = {
					"to_address": this.address,
					"amount": this.BNB_num,
					"pay_type": 0,
					"transfer_net": 0,
					"verfity_code": this.verfity_code,
					"pay_password": psd
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					code
				} = await this.$http.post(withdrawal,
					params
				)

				uni.hideLoading()
				if (code === 200) {

					uni.showToast({
						title: '申请兑换成功，请等待审核',
					})

					setTimeout(() => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 1200)
				}
				console.log('succ', psd)
			},
			openHintPopup() {
				this.pointGiveAwayApi.data = {
					value: this.value
				}
				this.$refs.passwordInput.open()
				// this.$refs.exchangeHint.open()
			},
			getDetail(info) {
				uni.showModal({
					content: info, //模板中提示的内容
					confirmText: '复制内容',
					success: (res) => { //点击复制内容的后调函数
						if (res.confirm) {
							let result
							// #ifndef H5
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
								data: info, //要被复制的内容
								success: () => { //复制成功的回调函数
									uni.showToast({ //提示
										title: '复制成功'
									})
								}
							});
							// #endif

							// #ifdef H5 
							let textarea = document.createElement("textarea")
							textarea.value = info
							textarea.readOnly = "readOnly"
							document.body.appendChild(textarea)
							textarea.select() // 选中文本内容
							textarea.setSelectionRange(0, info.length)
							uni.showToast({ //提示
								title: '复制成功'
							})
							result = document.execCommand("copy")
							textarea.remove()
							// #endif
						} else {
							console.log('取消')
						}
					}
				});
			},
			getAllBNB() {
				this.BNB_num = this.integralable
			},
			getHandleAddress(val) {
				this.address = val.detail.value
			},
			async getHandleFee(val) {
				this.inputColor = '#000'
				const number = val.detail.value
				if (!this.checkNumber(number)) {
					this.inputColor = '#f5222d'
					this.handleFee = 0.00
					return
				}
				if (!number) {
					this.handleFee = 0.00
					return
				}
				const url = handleFee + '/' + number
				console.log(val.detail.value, url)
				this.BNB_num = number
				const res1 = await this.$http.get(url)
				this.real_amount = res1.data.real_amount
				this.handleFee = res1.data.hand_fee
				console.log(res1)
			},

			checkNumber(val) {
				if (val > this.integralable) {

					return false
				} else {
					return true
				}
			},

			countDown() {
				if (this.time <= 0) {
					this.disabled = false;
					this.verificationCode = "重新获取";
					this.isPhone = true;
					this.time = 60;
					clearInterval(this.clear)
				} else {
					--this.time;
					this.verificationCode = this.time + 's'
				}
			},
			async submit2() {
				console.log('submit2')
				// debugger
				if (!this.address) {
					this.$mUtil.toast("请输入地址")
					return
				}
				// console.log('submit', this.BNB_num)
				// if (!this.BNB_num || !this.checkNumber(this.BNB_num)) {
				// 	uni.showToast({
				// 		title: '请正确输入兑换数量',
				// 		icon: 'error',
				// 	})
				// 	return
				// }


				if (!this.verfity_code) {
					this.$mUtil.toast("请输入验证码")
					return
				}
				this.openHintPopup()

			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 712rpx;
		height: 1038rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 19rpx;
		padding: 39rpx;
		box-sizing: border-box;
	}

	.text-box {
		width: 100%;


		.text-title {
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;
		}

		/deep/.uni-input-input {
			color: #AAAAAA !important;
		}

		.unit-input {
			display: flex;
			justify-content: space-between;
			align-items: center;


			&-button {
				color: #3d93fc;
				margin-left: 20rpx;
			}
		}

		.text-wrapper {
			width: 635rpx;
			height: 96rpx;
			background: #F9F9F9;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin-top: 19rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding-left: 19rpx;

			.input_value {
				font-weight: normal;
				color: #B2B2B2;
			}

			.text-unit {}

			.unit-input-button {
			}
		}

		.text-divider {
			margin: 30rpx 0;
		}
	}

	.des {
		margin: 40rpx 0;
		color: #AAAAAA
	}

	.footer-wrapper {
		width: 100%;
		color: #474747;
		margin-top: 154rpx;
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
		align-items: center;
		.footer-content {
			&-num {
				font-size: 28rpx;
				margin: 12rpx 0;

				span:first-child {
					margin-right: 10rpx;
					font-size: 48rpx;
				}
			}
		}

		.footer-button {
			margin-top: 57rpx;
			.mini-btn {
				width: 635rpx;
				height: 85rpx;
				flex-shrink: 0;
				background: #FF211F;
				border-radius: 19rpx 19rpx 19rpx 19rpx;
			}
		}
	}

	.usable-btn {
		width: 80%;
		height: 90rpx;
		background: #3d93fc;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		margin-top: 158rpx;
	}



	.verification-right {
		width: 154rpx;
		height: 65rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #FF211F;
		font-weight: 400;
		font-size: 23rpx;
		color: #FF211F;
	}

	.allView {
		color: #FF211F;
		margin-left: 100rpx;
		font-weight: 400;
		font-size: 25rpx;
	}

	.allViewjifen {
		color: #FF211F;
		font-weight: 400;
		font-size: 25rpx;
		margin-top: 19rpx;
		line-height: 25rpx;
	}
	.footer-content-item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 29rpx;
		color: #333333;
		line-height: 29rpx;
	}
	.zhuanhuanjifen{
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		line-height: 25rpx;
	}
	.footer-content-num{
		font-weight: 500;
		font-size: 29rpx;
		color: #FF211F;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		line-height: 29rpx;
	}
	.footer-content-num view:nth-child(1){
		margin:0 6rpx
	}
</style>